import React, { useRef, useEffect, useState } from 'react';

interface LazyLoadImageProps {
  src: string;
  alt: string;
  fallbackSrc?: string; // 可选的备用图片
  width?: number,
  height?: number
}

const LazyLoadImage: React.FC<LazyLoadImageProps> = ({ src, alt, fallbackSrc, width, height }) => {
  const [imageSrc, setImageSrc] = useState<string>('');  //图片
  const imgRef = useRef<HTMLImageElement | null>(null);  //图片元素

  useEffect(() => {
    //            是一个用于监测目标元素是否在视口中的 API。
    let observer: IntersectionObserver | null = null;
    // 使用 IntersectionObserver API 来观察图片元素的可见性。当图片进入视口（即滚动到可见区域）时，setImageSrc(src) 会将图片源设置为实际的 src
    if (imgRef.current) {
      observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {  //是一个布尔值，表示元素是否与视口相交。如果是，说明图像即将可见
            setImageSrc(src);  //会更新组件状态，将实际的图像 URL 赋值给 imageSrc
            observer?.unobserve(imgRef.current!);  //停止观察当前元素，以避免不必要的性能开销。
          }
        },
        { rootMargin: '0px 0px 200px 0px' }
      );
      observer.observe(imgRef.current);
    }
    // observer.unobserve 在图片加载后停止观察，以优化性能。
    return () => {
      if (observer && imgRef.current) {
        observer.unobserve(imgRef.current);
      }
    };
  }, [src]);
  // handleError 函数在图片加载失败时触发，如果提供了 fallbackSrc，则将 imageSrc 设置为备用图片。
  const handleError = () => {
    if (fallbackSrc) {
      setImageSrc(fallbackSrc);
    }
  };

  return <img ref={imgRef} src={imageSrc} alt={alt} onError={handleError} width={width} height={height} />;
};

export default LazyLoadImage;
